<!--
 * @Author: ChunLai
 * @Date: 2022-08-24 09:33:18
 * @LastEditTime: 2025-09-10 17:27:33
 * @Description: 重庆类告知 -- 通用配置版
 * @FilePath: \02.bldinsure\src\views\healthy\chongqing\Common.vue
-->
<template>
  <div class="healthy-wrap-cc bg-fff">
    <h3 v-if="pageData[0]">{{ pageData[0].title }}</h3>
    <TipMsg :msg="tipMsg"></TipMsg>
    <div
      class="main-box pd14_lr"
      v-for="(unit, idx) in pageData"
      :key="`cq-${idx}`"
    >
      <template v-if="idx == 1 || idx == 2">
        <div class="sub-title" v-if="pageData[0].optionList[1].checked">
          {{ unit.ImpartContent }}
        </div>
      </template>
      <template v-else>
        <div class="sub-title" v-if="unit.ImpartContent">
          {{ unit.ImpartContent }}
        </div>
      </template>
      <!-- 第1(1)题 -->
      <template v-if="unit.type === 'subject1'">
        <div
          class="pd-l14 pdt6"
          v-for="(sub1, j) in unit.optionList"
          :key="`sub1-${j}`"
        >
          <van-checkbox
            :name="sub1.name"
            v-model="sub1.checked"
            shape="square"
            checked-color="#f54040"
            icon-size="14px"
            @change="
              (e) => {
                changeCheckbox(e, `sub1-${sub1.name}`);
              }
            "
          >
            {{ sub1.label }}
          </van-checkbox>
          <div
            class="pd-l18"
            v-if="sub1.optionList && sub1.optionList.length > 0"
          >
            <template v-if="sub1.checked && sub1.name === 'A'">
              <van-checkbox-group v-model="unit.optionA" direction="horizontal">
                <van-checkbox
                  shape="square"
                  checked-color="#f54040"
                  icon-size="14px"
                  :name="sub12.value"
                  v-for="(sub12, j) in sub1.optionList"
                  :key="`sub${sub1.value}-${j}`"
                >
                  {{ sub12.label }}
                </van-checkbox>
              </van-checkbox-group>
            </template>
            <template v-if="sub1.checked && sub1.name === 'B'">
              <van-checkbox-group v-model="unit.optionB" direction="horizontal">
                <van-checkbox
                  shape="square"
                  checked-color="#f54040"
                  icon-size="14px"
                  :name="sub12.value"
                  v-for="(sub12, j) in sub1.optionList"
                  :key="`sub${sub1.value}-${j}`"
                >
                  {{ sub12.label }}
                </van-checkbox>
              </van-checkbox-group>
            </template>
          </div>
        </div>
      </template>
      <!-- 第1(2)题 -->
      <template
        v-if="pageData[0].optionList[1].checked && unit.type === 'subject1_2'"
      >
        <div class="pd-l14 pdt6">
          <van-radio-group v-model="unit.ImpartParammodle">
            <van-radio
              :name="opt.value"
              shape="square"
              checked-color="#f54040"
              icon-size="14px"
              v-for="(opt, j) in unit.optionList"
              :key="`sub12-${j}`"
            >
              {{ opt.label }}
            </van-radio>
          </van-radio-group>
        </div>
      </template>
      <!-- 第1(3)题 -->
      <template
        v-else-if="
          pageData[0].optionList[1].checked && unit.type === 'subject1_3'
        "
      >
        <div class="pd-l14 pdt6">
          <van-radio-group v-model="unit.ImpartParammodle">
            <van-radio
              :name="opt.value"
              shape="square"
              checked-color="#f54040"
              icon-size="14px"
              v-for="(opt, j) in unit.optionList"
              :key="`sub13-${j}`"
            >
              {{ opt.label }}
            </van-radio>
          </van-radio-group>
        </div>
      </template>
      <!-- 第2题 -->
      <template v-else-if="unit.type === 'subject2'">
        <div
          class="pd-l14 pdt6"
          v-for="(opt, j) in unit.optionList"
          :key="`sub2-${j}`"
        >
          <van-checkbox
            v-model="opt.checked"
            :name="opt.name"
            shape="square"
            icon-size="14px"
            checked-color="#f54040"
          >
            {{ opt.label }}
          </van-checkbox>
          <div class="pd-l30 md-inputs" :key="`sub2-${j}1`">
            <div class="input-main">
              <div class="input-box">
                <input
                  class="md-input"
                  type="number"
                  onkeyup="this.value=this.value.replace(/\D/g,'')"
                  placeholder="金额"
                  v-model="opt.inputCash"
                />
              </div>
              {{ opt.inputCashUnit }}
            </div>
            <div class="input-main mt6">
              <div class="input-box">
                <input
                  class="md-input"
                  type="number"
                  placeholder="保障期限"
                  v-model="opt.inputYear"
                />
              </div>
              <div class="radios-box">
                <van-radio-group v-model="opt.inputTime" direction="horizontal">
                  <van-radio
                    v-for="(ele, idx) in opt.inputTimeUnit"
                    :key="`${opt.name}-${ele.value}-${idx}`"
                    :name="ele.value"
                    checked-color="#f54040"
                    icon-size="14px"
                  >
                    {{ ele.label }}
                  </van-radio>
                </van-radio-group>
              </div>
            </div>
          </div>
        </div>
      </template>
      <!-- 第3题 -->
      <template v-else-if="unit.type === 'subject3'">
        <div class="pd-l14 pdt6">
          <van-radio-group v-model="unit.ImpartParammodle">
            <van-radio
              :name="opt.value"
              shape="square"
              checked-color="#f54040"
              icon-size="14px"
              v-for="(opt, j) in unit.optionList"
              :key="`sub3-${j}`"
            >
              <div v-html="opt.label"></div>
            </van-radio>
          </van-radio-group>
        </div>
      </template>
      <!-- 第4题 -->
      <template v-else-if="unit.type === 'subject4'">
        <div
          class="pd-l14 pdt6 sub4-box"
          v-for="(opt, j) in unit.optionList"
          :key="`sub4-${j}`"
        >
          <van-checkbox
            v-model="opt.checked"
            shape="square"
            icon-size="14px"
            checked-color="#f54040"
            @change="
              (e) => {
                changeCheckbox(e, `sub4-${opt.name}`);
              }
            "
          >
            {{ opt.label }}
          </van-checkbox>
          <div class="input-main">
            <div class="input-box">
              <input
                class="md-input"
                type="number"
                placeholder="交费金额"
                v-model="opt.inputCash"
              />
            </div>
            {{ opt.inputCashUnit }} {{ opt.name === "B" ? "，" : "" }}
          </div>
          <div class="input-main pd-l20" v-if="opt.name === 'B'">
            能够持续交
            <div class="input-box w40">
              <input
                class="md-input"
                type="number"
                placeholder="缴费期间"
                v-model="opt.inputTime"
              />
            </div>
            年
          </div>
        </div>
      </template>
    </div>
    <div class="foot-tips">
      提示：如果您在保障期满前需用钱而要求退还保险费，一般会有一些损失。不按期交费会导致保单失效。
    </div>
    <template v-if="!disabledEdit">
      <FooterBtns btnNum="1" @saveForm="nextStep" />
    </template>
    <div class="fix_foot_box" v-else>
      <div class="actionBox">
        <van-button type="warning" block round @click="$backRouter()">
          返回
        </van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  jsonInitPageDatas,
  validateChongqing,
  pageToApiChongqing,
  apiToPageChongqing,
} from "@/translate/healthy/chongqing.js";

export default {
  name: "CQQuestionCommonPage",
  components: {},
  data() {
    return {
      tipMsg:
        "本问卷能够帮助您选择购买最适合的保险产品。请您在所选答案前“打钩”（可多选），并填写有关内容。<b>我们将对您的信息保密。</b>",
      pageData: {},
      queryData: null, // 路由数据
    };
  },
  mixins: [],
  computed: {
    ...mapGetters({
      applicant: "insert/applicant",
      showedRisks: "risks/showedRisks",
      totalPrem: "insert/totalPrem",
    }),
    isShareHealthy() {
      let res = false;
      if (this.$getDataFromUrl("share") == "1") {
        res = true;
      }
      return res;
    },
  },
  async created() {
    this.handlerRender();
  },
  methods: {
    // 获取健康告知相关数据
    handlerRender() {
      this.$store
        .dispatch("json/getNoticeJson", "chongqing")
        .then(async (res) => {
          let tempDatas = await jsonInitPageDatas(
            res.Datas,
            this.showedRisks,
            this.totalPrem
          );
          this.pageData = JSON.parse(JSON.stringify(tempDatas));
          // 回显
          this.dataEcho();
        });
    },
    dataEcho() {
      this.$store
        .dispatch("apis/comAdminApiRequest", {
          apiParams: {
            ...this.apiComParams,
            type: "4",
          },
          apiName: "queryImparts",
        })
        .then(async (data) => {
          await apiToPageChongqing(this.pageData, data.imparts);
        });
    },
    changeCheckbox(e, typeVal) {
      // console.log(e, typeVal);
      if (typeVal === "sub1-A") {
        if (!e) {
          this.$set(this.pageData[0], "optionA", []);
        }
      } else if (typeVal === "sub1-B") {
        if (!e) {
          this.$set(this.pageData[0], "optionB", []);
          this.$set(this.pageData[1], "ImpartParammodle", "");
          this.$set(this.pageData[2], "ImpartParammodle", "");
        }
      } else if (typeVal === "sub4-A") {
        if (e) {
          this.$set(this.pageData[5].optionList[1], "checked", false);
          this.$set(this.pageData[5].optionList[1], "inputCash", "");
          this.$set(this.pageData[5].optionList[1], "inputTime", "");
        }
      } else if (typeVal === "sub4-B") {
        if (e) {
          this.$set(this.pageData[5].optionList[0], "checked", false);
          this.$set(this.pageData[5].optionList[0], "inputCash", "");
        }
      }
    },
    async nextStep() {
      let result = await this.validateBase(this.pageData);
      if (!result) {
        return false;
      }
      // 发送数据转化
      let apiDatas = await pageToApiChongqing(this.pageData);
      // console.log('准备发送数据....', apiDatas);
      this.$baseConfirm("以上内容是否为投保本人填写？", () => {
        this.submit(apiDatas);
      });
    },
    validateBase(healthyDatas) {
      return new Promise((resolve, reject) => {
        let resObj = {};
        resObj = validateChongqing(
          healthyDatas,
          this.showedRisks,
          this.totalPrem
        );
        if (!resObj.status) {
          this.$baseAlert(resObj.msg, () => {
            resolve(resObj.status);
          });
        } else {
          this.pageData = healthyDatas;
          resolve(true);
        }
      });
    },
    submit(dataList) {
      let params = {
        ...this.apiComParams,
        type: "4",
        imparts: dataList,
      };
      this.$store
        .dispatch("apis/comAdminApiRequest", {
          apiParams: params,
          apiName: "saveImparts",
          toast: true,
        })
        .then((data) => {
          if (data.code == "1") {
            if (this.isShareHealthy) {
              this.$baseAlert("提交成功", () => {
                this.$router.replace({
                  path: "/shareres?res=success",
                });
              });
            } else {
              this.$backRouter();
            }
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
@import "./style.less";
</style>
